<template>
  <div class="dashboard-container">
    <div class="bgc">
      <div
        class="title"
        style="
          width: 100%;
          color: #fff;
          font-weight: 500;
          font-size: 24px;
          height: 100px;
          box-sizing: border-box;
          padding-left: 20px;
          display: flex;
          align-items: center;
          margin-top: 20px;
          margin-bottom: 30px;
          border-bottom: 1px solid #fff;
        "
      >
        Download data
      </div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
        style="height: 100%"
      >
        <el-form-item label="项目id" prop="name">
          <!-- <el-input class="el-inputs"  readonly style="width: 220px;" v-model="sensor.name"></el-input> -->
          <div
            style="
              width: 210px;
              border-radius: 4px;
              height: 40px;
              border: 1px solid #fff;
              text-align: center;
              line-height: 40px;
              color: #fff;
            "
            @click="centerDialogVisible = true"
          >
            {{ sensor.name }}
          </div>
        </el-form-item>
        <el-form-item label="Data format:" prop="">
          <el-select v-model="form.is_calc" placeholder="" style="width: 210px">
            <el-option label="计算结果" value="1"></el-option>
            <el-option label="原始数据" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Start-time" prop="">
          <text>(possible start-time:2019-01-30 08:00:00)</text>
          <!-- <el-input class="el-inputs" v-model="form.username"></el-input> -->
          <el-date-picker
            v-model="form.start"
            style="width: 210px"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
          >
          </el-date-picker>
          <span style="color: #fff; margin-left: 20px"
            >(possible start-time:2019-01-30 08:00:00)</span
          >
        </el-form-item>
        <el-form-item label="End-time" prop="">
          <!-- <el-input class="el-inputs" v-model="form.username"></el-input> -->
          <el-date-picker
            v-model="form.end"
            style="width: 210px"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
          >
          </el-date-picker>
          <span style="color: #fff; margin-left: 20px"
            >(possible end-time:2019-01-30 08:00:00)</span
          >
        </el-form-item>
        <el-form-item label="Separator：" prop="">
          <el-input class="el-inputs" style="width: 210px" v-model="form.separator"></el-input>
        </el-form-item>
        <!--
        <el-form-item label="密码：" prop="">
          <el-input class="el-inputs" v-model="form.password"></el-input>
        </el-form-item> -->

        <el-form-item class="" style="display: flex; justify-content: center; margin-top: 220px">
          <el-button
            type="primary"
            style="margin: 0 auto; margin-left: 0px"
            @click="submitForm('form')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
      <!-- <div v-if="type == 1" class="forms">
        
      </div> -->
      <div
        class="dashboard-text"
        style="
          border-bottom: 1px solid #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 140px;
        "
      >
        <div
          style="
            color: #fff;
            font-weight: 500;
            font-size: 18px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
          "
        >
          <!-- <el-dialog
              title="传感器列表"
              :visible.sync="centerDialogVisible"
              width="35%"
              center
            >
              
              <el-pagination
                background
                class="mt"
                layout="prev, pager, next"
                :total="sensorTotal"
                @current-change="sensorPageChange"
              />
            </el-dialog> -->
          <!-- <el-button size="mini" @click="openDialog">{{
            sensor.name === '' ? '选择传感器' : sensor.name
          }}</el-button>

          <el-date-picker
            v-model="time"
            type="datetimerange"
            value-format="timestamp"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDateTimePicker"
          /> -->
        </div>
      </div>
      <div class="pop" v-if="centerDialogVisible">
        <el-table
          class="box"
          :data="sensorList"
          :highlight-current-row="false"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :height="300"
        >
          <el-table-column prop="id" label="ID" sortable />
          <el-table-column prop="name" label="传感器名称" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="location" label="安装位置" />
          <el-table-column prop="remark" label="备注" />

          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="selectSensorToQuery(scope.$index, scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
  <script>
import { mapGetters } from 'vuex'
import { sensor_list } from '@/api/sensor'
import { sensor_data_edit, sensor_data_list } from '@/api/sensor_data'
import { excel } from '@/api/user'

import { formatDate } from 'element-ui/src/utils/date-util'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['currentProjectId'])
  },
  data() {
    return {
      form: {
        sensor_id: '',
        start: '',
        end: '',
        is_calc: '',
        separator: ''
      },

      time: '',
      centerDialogVisible: false,
      sensor: {
        id: 0,
        name: '',
        unit: '',
        location: '',
        remark: ''
      },
      sensorTotal: 0,
      sensorList: [],
      editDialogVisible: false,
      editForm: {
        timestamp: 0,
        value: 0
      }
    }
  },
  watch: {
    currentProjectId(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.getSensorList()
      }
    }
  },
  created() {
    this.getSensorList()
  },
  methods: {
    submitForm() {
      this.form.start /= 1000
      this.form.end /= 1000

      excel(this.form).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '导出成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '导出失败',
            type: 'error'
          })
        }
        console.log(res, '111')
      })
    },
    formatDate(timestamp) {
      return formatDate(new Date(timestamp * 1000), 'yyyy-MM-dd HH:mm:ss').toString()
    },
    openDialog() {
      this.centerDialogVisible = true
    },
    selectSensorToQuery(index, sensor) {
      this.form.sensor_id = sensor.id
      this.sensor.name = sensor.name

      this.centerDialogVisible = false
    },
    changeDateTimePicker(item) {
      this.start = parseInt(item[0] / 1000)
      this.end = parseInt(item[1] / 1000)
    },

    sensorPageChange(index) {
      this.getSensorList(index)
    },

    getSensorList(page = 1) {
      sensor_list(this.$route.query.project_id, '', page).then(res => {
        if (res.code === 200) {
          this.sensorList = res.data.list
          this.sensorTotal = res.data.total
        }
      })
    },

    search(page = 1) {
      sensor_data_list(this.sensor.id, this.start, this.end, page).then(res => {
        if (res.code === 200) {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    },
    handleDelete(index, item) {},
    handleEdit(index, item) {
      this.editDialogVisible = true
      this.editForm.timestamp = item.timestamp
      this.editForm.value = item.value
    },
    saveData(timestamp, value) {
      const data = {
        sensor_id: this.sensor.id,
        timestamp: timestamp,
        value: value
      }

      sensor_data_edit(data).then(res => {
        if (res.code === 200) {
          this.editDialogVisible = false
          this.$message({
            message: '修改成功',
            type: 'success'
          })

          // 重新刷新表格内容
          this.search(1)
        }
      })
    }
  }
}
</script>
  
  <style lang="scss" scoped>
::v-deep.el-table__body {
  overflow: auto !important;
}

/* 隐藏滚动条 */
::v-deep.el-table__body::-webkit-scrollbar {
  display: none !important;
}
.bgc {
  width: 100%;
  height: 80vh;
  border: 1px solid rgb(101, 166, 231);
  // background-color: red;
  //   width: 400px;
  //  height: 300px;
  //  background-color: #222 !important;
  //  border-radius: 10px;
  //  display: flex;
  //  align-items: center;
  //  justify-content: center;
  //  font-size: 20px;
  //  color: #fff;
  //  font-weight: 800;
  //  position: relative;
  //  z-index: 20;
  // background: url('../../views/images/编组-3-20240612172302722_副本.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  // background-color: red;
}
:v-deep .el-table__fixed-right-patch {
  // display: none !important;
  background-color: red !important;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
}
.bianji {
  width: 100%;
  text-align: center;
  height: 91px;
  line-height: 65px;
  color: #fff;
}
.pop2 {
  width: 750px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/弹窗01-20240410102601620.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  box-sizing: border-box;
  padding: 34px 111px 135px 82px;
}
::v-deep .el-button {
  background-color: transparent !important;
}
.pop {
  width: 750px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/弹窗01-20240410102601620.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  box-sizing: border-box;
  padding: 34px 111px 162px 82px;
}
::v-deep .el-table {
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 500;
}
::v-deep .el-date-editor .el-range-separator {
  color: #fff !important;
}
::v-deep .el-picker-panel__body-wrapper {
  background: transparent !important ;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
}
::v-deep .el-range-editor .el-range-input {
  line-height: 1;
  background-color: transparent !important;
}
::v-deep .el-select:hover .el-input__inner {
  background-color: transparent !important;
}
::v-deep .el-table th {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 500;
}
::v-deep .el-table__row:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
// ::v-deep .el-table::before {
//   //去除底部白线
//   left: 0;
//   bottom: 0;
//   width: 100%;
//   height: 0px;
// }
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.mt {
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-pagination.is-background .el-pager li {
  background-color: transparent !important;
  border: 1px solid #fff;
  color: #fff;
}
::v-deep .el-pagination.is-background .btn-prev {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
::v-deep.el-pagination.is-background .btn-next {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
</style>
  